<template>
  <div class="user">
    <el-card class="box-card" style="margin:20px 15px">
      <div class="info">
        <div class="img"
          style="background-image: url('https://img1.qunarzz.com/ucenter/headshot/1806/91/ac986a71660b39ba.png_r_150x150_d16ca618.png');">
        </div>
        <div class="user-detail">
          <div class="name">{{ name }}</div>
        </div>
      </div>
    </el-card>
    <MenuList :list="menulist" :type="'big'"></MenuList>
    <NavTab></NavTab>
  </div>
</template>
<script>
import MenuList from '@/components/MenuList.vue'
import NavTab from '@/components/NavTab.vue'
export default {
  name: 'UserView',
  components: {
    MenuList,
    NavTab
  },
  setup() {
    return {
      name: '用户1',
      menulist: [
        {
          name: '订单',
          url: '/free',
          src: require('../assets/biaoqian.png')
        },
        {
          name: '设置',
          url: '/free',
          src: require('../assets/biji.png')
        },
        {
          name: '客服',
          url: '/free',
          src: require('../assets/dianzan.png')
        },
        {
          name: '个人信息',
          url: '/free',
          src: require('../assets/huiyuan.png')
        }
      ]
    }
  }
}
</script>
<style scoped>
.info {
  display: flex;
  align-items: center;
}


.img {
  width: 60px;
  height: 60px;
  background-size: contain;
  border-radius: 50%;
  background-color: #eee;
}

.user-detail {
  font-size: 18px;
  color: rgb(158, 158, 158);
  margin-left: 12px;
}
</style>